<!DOCTYPE html>
  <html lang="en">
<head>
  <meta charset="UTF-8">
    <title>高三一班点名册</title>
    <style>
      body{
          background-color: green;
       }
        .box{
            width: 1000px;
           height: 240px;
             margin: 0 auto;
           margin-top: 100px;
            clear: both;
       }
       #btn{
            width: 100px;
            height: 30px;
           margin-left: 600px;
            margin-top: 50px;
          }
         .name{
             width: 100px;
             height: 30px;
           float: left;
            background-color: antiquewhite;
              margin-left: 10px;
             margin-top: 10px;
             text-align: center;
              line-height: 30px;
          }
         #span{
             float: right;
              position: relative;
            top: 55px;
              right: 185px;
          }
         h1{
              text-align: center;
          }
      </style>
 
 </head>
 <body>
  <h1>高三一班随机点名系统</h1>
<span id="span"></span>
 <div class="box" id="box"></div>
  <input type="button" id="btn" value="点名"/>



 <script type="text/javascript">
     //创造虚拟后台数据
      var arrs = ["雷坊坊","管曌捷","李卓凡","梁宇洁","成志伟","王瑞杨,","王恩光","申双",
        "行洋欢","李楠","贺鑫垚","王冠鑫","成雪","白雪靓","周洁","张翌成","陈博","颜晨阳"
         ,"赵真强","杨朝辉","鱼鹏跃","杨煜聪","杨佳锋","秦嘉豪","王佳乐","胡露洋","李毅卓","张晨凯"
        ,"陶嘉豪","杨鹏涛","张泽同","颜佳果","刘泽华","张国栋","杨文靖","李鑫颖","刘泽旭","辛智辉"
         ,"赵佳洋","范金鑫","王博洋","白诗怡","程赵宇","郑婉杰","吴沁桥"];
     //获取父元素
     var boxNode = document.getElementById("box");
     for (var i = 0; i < arrs.length; i++) {
         //创建新元素
          var divNode = document.createElement("div");
         divNode.innerHTML=arrs[i];
         divNode.className="name";
         boxNode.appendChild(divNode);
      }
      //点名
      var btn= document.getElementById("btn");
      btn.onclick = function () {
          if(this.value==="点名"){
                //定时
             timeId=setInterval(function () {
                     //清空所有颜色
                 for (var j = 0; j < arrs.length; j++) {
                      boxNode.children[j].style.background="";
                  }
                 //留下当前颜色
                 var random = parseInt(Math.random()*arrs.length);
                 boxNode.children[random].style.background="red";
             },100);
             this.value="停止";
          }else{
            //清除计时器
             clearInterval(timeId);
             this.value="点名";
          }
      }
      var spanNode = document.getElementById("span");
      //调用时间
     getTime();
      setInterval(getTime , 1000);
      function getTime() {
          var day = new Date();
          var year = day.getFullYear();
         var month = day.getMonth()+1;
          var dat = day.getDay();
         var hours = day.getHours();
        var minitues = day.getMinutes();
          var second = day.getSeconds();
         spanNode.innerHTML =year+"-"+month+"-"+dat+" "+hours+":"+minitues+":"+second;
    }
 </script>
 </body>
 </html>